<template>
	<view class="content">
		<!-- 头部 -->
		<!-- #ifndef H5 -->
		<header-navbar class="headerNavbar"></header-navbar>
		<!-- #endif -->
		<view class="allContainer" :style="{top:navHeaderHeight+'px'}">
			<view class="loginBox">
				<text class="loginTitle">欢迎您使用YouTea小程序</text>
				<text class="loginTitle">为了给您提供更好的服务</text>
				<!-- <text class="loginContent">获得你的公开信息(昵称,头像,手机等)</text> -->
				<image src="../../static/images/icon/tabBar/icon-topBar.png" class="loginImg"></image>
				<text class="loginTitle">申请获取以下权限</text>
				<text class="loginContent">获得你的公开信息(昵称,头像,手机等)</text>
				<button class='authBtn' type='primary' open-type='getUserInfo' @getuserinfo="isLogin"
					withCredentials="true">授权登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderNavbar from '../../components/HeaderNavbar.vue';
	import {
		navHeaderHeight
	} from '../../assets/js/navHeaderHeight.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'login',
		data() {
			return {
				navHeaderHeight: null, //自定义导航栏高度(用于填充防止页面塌陷)
			}
		},
		computed: {
			...mapState(['userIsLogin'])
		},
		watch: {
			userIsLogin(userLoginInfo) {
				// 监听mapState中的变量，当数据变化（有值、值改变等），
				this.userLoginInfo = userLoginInfo
			}
		},
		components: {
			HeaderNavbar,
		},
		methods: {
			isLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					//微信默认都是登录状态
					success: loginRes => {
				  // 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								// console.log('用户昵称为：' + infoRes.userInfo.nickName);
								// console.log(infoRes)
								let userInfo = infoRes.userInfo
								//把数据存入本地缓存,供各页面使用
								uni.setStorage({
									key: 'userInfo',
									data: userInfo,
									success: function() {
										// console.log('success');
									}
								});
								// router
								uni.showToast({
									title: '登陆成功',
									duration: 500
								})
								setTimeout(() => {
									that.$Router.pushTab({
										path: 'pages/index/index'
									})
								}, 1000)
							},
							fail: res => {
								console.log('获取用户信息失败');
							}
						});
					}
				});
			},

		},
		created() {
			var that = this;
			that.navHeaderHeight = navHeaderHeight
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

		},
		onReady() {

		},
		onShow() {

		}
	}
</script>
<style lang="scss">
	@import '@/assets/scss/mixin.scss';
	@import '@/assets/scss/config.scss';
	@import '@/assets/scss/button.scss';

	.content {
		@include flex(center, center);
		flex-direction: column;
		background-color: #FFF;

		.headerNavbar {
			@include position(relative);
			z-index: 10000;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
			text-align: center;
			// margin-top: 44rpx;
		}

		.allContainer {
			width: 100vh;
			height: 100vh;
			position: relative;
			left: 0;
			text-align: center;

			@include flex(center, flex-start) .loginBox {
				width: 100%;
				padding: 20% 20rpx 0;
				@include flex(center, center);
				flex-wrap: wrap;

				.loginImg {
					width: 150rpx;
					height: 150rpx;
				}

				.loginTitle,
				.loginContent,
				.authBtn {
					display: block;
					width: 100%;
					// border: 1rpx solid $colorA;
					margin-top: 20rpx;

				}

				.loginTitle {}

				.loginContent {}

				.authBtn {
					display: inline-block;
					width: 110px;
					line-height: 30px;
					text-align: center;
					background-color: $colorA;
					color: #FFF;
					border: 0;
					cursor: pointer;
				}
			}
		}
	}
</style>
